<template>
    <div>
        <combo02 @result="comboResult"></combo02>
        <div class="company-pay">
            <h3>公账户付款</h3>
            <p>账户名：天津商聚电子商务有限公司</p>
            <p>银行：渤海银行股份有限公司天津北辰支行</p>
            <p>账号：2001177450000167</p>
            <p>（对公账户付款请联系客服）</p>
        </div>
        <pay01 @result="payResult"></pay01>
        <Button type="primary" @click="payNow" class="pay-button">立即支付</Button>
        <Modal
                title="请用微信扫描二维码"
                v-model="payModel"
                @on-cancel="payModel=false"
                :closable="false">
            <div id="qrCode" ref="qrCodeDiv"></div>
            <div slot="footer">
                <Button type="primary" size="large" @click="payModel=false">关闭</Button>
            </div>
        </Modal>
    </div>
</template>

<script>
import { userCreateOrder, checkOrderStatus } from '@/api/user'
import QRcode from 'qrcodejs2'
import Combo02 from './components/combo02'
import Pay01 from './components/pay01'

export default {
  components: { Pay01, Combo02 },
  data () {
    return {
      comboData: '',
      payType: '',
      payModel: false,
      order: '',
      apiRun: false
    }
  },
  mounted () {
    let _this = this
    setInterval(function () {
      if (_this.payModel === true) {
        _this.checkPayState()
      }
    }, 1000)
  },
  methods: {
    payNow () {
      if (this.comboData === '') {
        this.$Message.error('请选择套餐')
        return false
      }
      if (this.payType === '') {
        this.$Message.error('请选择支付类型')
        return false
      }
      this.createOrder()
    },
    createOrder () {
      userCreateOrder(this.comboData, this.payType).then(ret => {
        if (ret.data.errcode === 1001) {
          if (this.payType === 1) {
            window.open(ret.data.data.pay_url)
            this.$Modal.confirm({
              title: '支付宝支付',
              content: '支付成功后点击确定按钮',
              okText: '支付成功',
              onOk: function () {
                checkOrderStatus(ret.data.data.order).then(ret => {
                  this.apiRun = false
                  if (ret.data.errcode === 1001) {
                    this.$Message.success('支付成功')
                    location.reload()
                  }
                }).catch(e => {
                  this.apiRun = false
                })
              }
            })
          } else {
            this.order = ret.data.data.order
            this.payModel = true
            this.$refs.qrCodeDiv.innerHTML = ''
            let qrcode = new QRcode('qrCode', {
              width: 200,
              height: 200, // 高度
              text: ret.data.data.pay_url, // 二维码内容
              render: 'canvas' // 设置渲染方式（有两种方式 table和canvas，默认是canvas）
              // background: '#f0f',
              // foreground: '#ff0'
            })
            console.log(qrcode)
          }
        } else {
          this.$Message.error(ret.data.errmsg)
        }
      })
    },
    checkPayState () {
      if (this.apiRun === false) {
        this.apiRun = true
        checkOrderStatus(this.order).then(ret => {
          this.apiRun = false
          if (ret.data.errcode === 1001) {
            this.$Message.success('支付成功')
            location.reload()
          }
        }).catch(e => {
          this.apiRun = false
        })
      }
    },
    comboResult (num) {
      this.comboData = num
    },
    payResult (num) {
      this.payType = num
    }
  }
}
</script>

<style scoped lang="less">
    .pay-button {
        margin-top: 20px;
    }

    #qrCode {
        display: flex;
        justify-content: center;
    }
    .company-pay{
        font-size: 14px;
        line-height: 1.7;
        padding: 20px 0 0 20px;
    }
</style>
